可用於網頁上做互動特效的開發創作

• p5.js：由Lauren Lee McCarthy開起的專案，讓web執行processing指令。
• https://p5js.org/reference/

線上開發平台：https://www.openprocessing.org/

基本函式

• fill()填入顏色
• stroke() 線條顏色
• draw() 裡面是要畫的東西
• mouseIsPressed判斷是否按下滑鼠

// 只在程式開始時執行一次
function setup() {
	createCanvas(windowWidth, windowHeight);// 畫布大小
	background(100); //初始背景顏色，一個數字代表灰階，0為黑，255為白
}
//在開始之後持續執行的函式
function draw() {
	background(100,25); //當背景參數為兩個，第二個為透明度(The alpha range by default is also 0 to 255,0全透明255不透明)
	strokeWeight(3);// 邊框寬 Number: the weight (in pixels) of the stroke
	stroke(255, 204, 20);// 邊框顏色
	if (mouseIsPressed){// 內建變數是否有按滑鼠
		fill(255,mouseX, mouseY);
		rect(mouseX, mouseY, mouseX, 20);// mouseX,mouseY滑鼠x軸y軸位置![](https://i.imgur.com/AFFAs3x.jpg)

		line(0,0,mouseX,mouseY); //畫兩點間線段 line(x1, y1, x2, y2)
	} else {
		fill(0,mouseY,mouseX); //物件填色
		ellipse(mouseX, mouseY, 20, 20);
	}
	// print(frameCount)// 目前畫面已累積的禎數
}

原本是圓形 按下之後是 長方形

Demo

Cheatsheet

1. setup 與 draw 有什麼不一樣，個別執行的時機跟作用是什麼？

setup為程式開始時執行一次
draw為程式開始後持續一直執行

2. 要如何改變視窗的大小呢？

createCanvas(寬，高)
https://p5js.org/reference/#/p5/createCanvas

3. background() 裡面可以使用哪些參數，試著從文件中找找看

https://p5js.org/reference/#/p5/background

4. 希望有按下滑鼠的時候，才根據滑鼠的位置改變顏色要怎麼做到呢？

使用mouseIsPressed判斷滑鼠是否有點擊，
再使用內建變數mouseX, mouseY抓滑鼠x軸與y軸
rect(mouseX, mouseY, 圖形寬, 圖形高);

5. 如果我想要改變先前軌跡變淡的速度，要怎麼做呢？

在draw裡面增加背景透明度，每次都蓋上一層透明背景
background(gray, [a])

https://www.openprocessing.org/sketch/649468

//1.建立 點擊的物件
 // 撰寫建構式，以滿足下方的輸出要求
class Dot {

  constructor(x, y, color) {
    this.x = x; //x y 是位置座標
    this.y = y;
    this.color = color;
    this.size = random(10, 50);// 10~50 size大小

 
    this.xoff = random(0, 100);// 0~100 x偏離位置
    this.yoff = random(0, 100);
  }
// 如何畫出來 撰寫方法，以滿足下方的輸出要求
  draw() {
    if (this.size > 0) {

      fill(this.color); //* fill()填入顏色
      ellipse(this.x, this.y, this.size); //
      this.x += (noise(this.xoff) * 2 - 1) * 3;
      this.y -= (noise(this.yoff) * 2 - 1) * 3;
      this.size -= 0.1;
      this.yoff += 0.01;
    } else {
      dots.splice(dots.indexOf(this), 1);//就是刪了一個了
    }
  }
}

let dots = [];
let colors = ["#393E47", "#00ADB6", "#FFF4E1", "#F8B501", "#FC3C3D"];
let bg = "#393E47";

let autox = 0;
let autodir = 1;
const autospeed = 5;

let isOver = false;


function setup() {
  let c = createCanvas(windowWidth, windowHeight - 40);
  c.mouseOver(() => isOver = true);
  c.mouseOut(() => isOver = false);
  noStroke();
  background(bg);
}

function draw() {
  if (mouseIsPressed && isOver) {
    dots.push(new Dot(mouseX, mouseY, colors[int(random(colors.length))]));
  }
  
	dots.push(new Dot(autox, height, colors[int(random(colors.length))]));

	if (autodir == 1) {
		if (autox < width) autox += autospeed;
		else autodir = -1;
	} else {
		if (autox > 0) autox -= autospeed;
		else autodir = 1;
	}
  for (let i = 0; i < 5; i++) {
    for (let dd of dots) {
      dd.draw();
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight - 40);
  background(bg)
}